<!--  -->
<template>
	<view>
		<view :class="num == 0 ? 'data-select' : 'data-select data-select-edit'">
			<view @click="dayselect">{{ dayname }}<uni-icons type="arrowdown" size="20"
					customIcons="icon-black"></uni-icons></view>
			<view @click="datatimeselect">{{ startDate == endDate ? startDate : startDate + '/' + endDate }}<uni-icons
					type="arrowdown" size="20" customIcons="icon-black"></uni-icons></view>
		</view>
		<uni-popup type="bottom" ref="typelistpop" background-color="#fff" :safe-area="false">
			<view class="pop-pay-way">
				<scroll-view scroll-y="true" class="add-pay-way-scroll">
					<view class="pay-way">
						<view class="pay-way-item" v-for="(item, index) in dataList" @click="selecttype(item, index)">
							<text>{{ item.title }}</text>
						</view>
					</view>
				</scroll-view>
				<button class="btn" @click="canceltypelist">取消</button>
			</view>
		</uni-popup>
		<uni-calendar ref="calendar" :range="true" :insert="false" @confirm="confirmStarDate" @close="close">
		</uni-calendar>
	</view>
</template>

<script>
import utils from "@/utils/utils.js"
export default {
	props: {
		startDate: {
			type: String,
			default: "",
		},
		endDate: {
			type: String,
			default: "",
		},
		dayname: {
			type: String,
			default: "今日",
		},
		num: {
			type: Number,
			default: 1,
		},
	},
	data() {
		return {
			dataList: [
				{
					title: "今日",
				},
				{
					title: "本周",
				},
				{
					title: "本月",
				},
				{
					title: "本年",
				},
				{
					title: "自定义",
				},
			],
		}
	},
	created() {

	},
	mounted() {

	},
	methods: {
		dayselect() {
			this.$refs.typelistpop.open()
		},
		canceltypelist() {
			this.$refs.typelistpop.close()
		},
		selecttype(item, index) {
			if (index == 0) {
				// 今日
				this.dayname = '今日'
				this.startDate = utils.today().startDate
				this.endDate = utils.today().endDate
			} else if (index == 1) {
				// 本周
				this.dayname = '本周'
				this.startDate = utils.thisWeek().startDate
				this.endDate = utils.thisWeek().endDate
			} else if (index == 2) {
				// 本月
				this.dayname = '本月'
				this.startDate = utils.thisMonth().startDate
				this.endDate = utils.thisMonth().endDate
			} else if (index == 3) {
				// 本年
				this.dayname = '本年'
				this.startDate = utils.thisYear().startDate
				this.endDate = utils.thisYear().endDate
			} else if (index == 4) {
				// 自定义
				this.$refs.calendar.open()
			}
			this.$refs.typelistpop.close()
			if (index != 4) {
				this.$emit("selDate", this.num, this.dayname, this.startDate, this.endDate)
			}

		},
		openStarDate() {
			//打开选择开始日期
			this.isShow = true
			setTimeout(() => {
				this.$refs.calendar.open()
			}, 300)
		},
		openStart() {
			this.$refs.startDate.open()
		},
		openEnd() {
			this.$refs.endDate.open()
		},
		confirmStarDate(e) {
			this.dayname = '自定义'
			if (e.range.data.length) {
				this.startDate = e.range.before
				this.endDate = e.range.after
			} else {
				this.startDate = e.fulldate
				this.endDate = e.fulldate
			}
			this.$refs.calendar.close()
			this.$emit("selDate", this.num, this.dayname, this.startDate, this.endDate)
		},
		datatimeselect() {
			this.$refs.calendar.open()
		},
		confirmStart(e) {
			this.$emit("selStartDate", e.fulldate)
		},
		confirmEnd(e) {
			this.$emit("selEndDate", e.fulldate)
		},
	},
	watch: {
		startDate(newVal) {
			this.startDate = newVal
		},
		endDate(newVal) {
			this.endDate = newVal
		},
	},
}
</script>
<style lang="scss" scoped>
.data-select {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 52rpx;

	&>view {
		font-size: 28rpx;
		padding: 0 24rpx;
		background: rgba(255, 255, 255, 0.18);
		border-radius: 26rpx;
		color: #fff;
		height: 100%;
		line-height: 52rpx;
		margin-right: 12rpx;
	}

	&>view:last-child {
		margin-right: 0rpx;
	}

	.icon-black {
		padding-left: 4rpx;
	}
}

.data-select-edit {
	height: 46rpx;

	&>view {
		font-size: 24rpx;
		border-radius: 26rpx;
		border: 1rpx solid #666666;
		height: 100%;
		line-height: 46rpx;
		color: #333;
		margin-right: 12rpx;
	}
}

.pay-way-item {
	display: block !important;
	text-align: center;

	text {
		font-size: 30rpx
	}
}
</style>
